<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
    <title>
        Javascript插件 &middot; Mower-前端开发框架
    </title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="mower/admin/css/mower.min.css" rel="stylesheet">
    <!-- Documentation extras -->
    <link href="assets/css/docs.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="assets/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Favicons -->
    <link rel="icon" href="../favicon.ico">
</head>

<body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand">Mower</a>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="getting-started.html">开始</a>
                    </li>
                    <li>
                        <a href="css.html">基础</a>
                    </li>
                    <li>
                        <a href="controls.html">控件</a>
                    </li>
                    <li>
                        <a href="components.html">组件</a>
                    </li>
                    <li class="active">
                        <a href="javascript.html">Javascript插件</a>
                    </li>
                    <li>
                        <a href="view.html">视图</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                     <li><a href="examples/admin/">示例</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
        <div class="container">
            <h1>JavaScript 插件</h1>
            <p>jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。</p>
        </div>
    </div>
    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-9" role="main">
                <div class="bs-docs-section">
                    <h2 id="modals" class="page-header">模态框 <small>modal.js</small></h2>
                    <p>模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。</p>
                    <div class="alert alert-warning" id="callout-stacked-modals">
                        <h4>不支持同时打开多个模态框</h4>
                        <p>千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。</p>
                    </div>
                    <h3 id="modals-examples" class="item-header">实例</h3>
                    <h4 id="modals-examples-static" class="subitem-header">静态实例</h4>
                    <p>以下模态框包含了模态框的头、体和一组放置于底部的按钮。</p>
                    <div class="bs-example bs-example-modal">
                        <div class="modal">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                                        <h4 class="modal-title">标题</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>主题内容...</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4 class="subitem-header" id="modals-examples-dynamic">动态实例</h4>
                    <p>点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。</p>
                    <div id="myModal" class="modal fade"  role="dialog" aria-labelledby="myModalLabel" style="display: none;">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="myModalLabel">对话框标题</h4>
                                </div>
                                <div class="modal-body">
                                    <h4>春晓 <small>唐代·孟浩然</small></h4>
                                    <p>春眠不觉晓⑴，处处闻啼鸟⑵。
                                        <br> 夜来风雨声⑶，花落知多少⑷。
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <div class="bs-example bs-example-padded-bottom">
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                            启动模态框
                        </button>
                    </div>
                    <h4 class="subitem-header" id="modal-sizing">更改模态框的大小</h4>
                    <p>模态框提供了两个可选尺寸，通过为 <code>.modal-dialog</code> 增加一个样式调整类实现。</p>
                    <div class="bs-example">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大模态框</button>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小模态框</button>
                    </div>
                    <div class="modal fade bs-example-modal-lg"  role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="myLargeModalLabel">大模态框</h4>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <div class="modal fade bs-example-modal-sm"  role="dialog" aria-labelledby="mySmallModalLabel">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="mySmallModalLabel">小模态框</h4>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;!-- Large modal --&gt;
&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"&gt;Large modal&lt;/button&gt;

&lt;div class="modal fade bs-example-modal-lg"  role="dialog" aria-labelledby="myLargeModalLabel"&gt;
  &lt;div class="modal-dialog modal-lg"&gt;
    &lt;div class="modal-content"&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Small modal --&gt;
&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"&gt;Small modal&lt;/button&gt;

&lt;div class="modal fade bs-example-modal-sm"  role="dialog" aria-labelledby="mySmallModalLabel"&gt;
  &lt;div class="modal-dialog modal-sm"&gt;
    &lt;div class="modal-content"&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
                </pre>
                    </div>
                    <h4 class="subitem-header" id="modal-fade">禁用动画效果</h4>
                    <p>模态框在弹出或隐藏时会伴随动画效果（淡入淡出效果），如果不需要，只需要移除<code>.modal</code>标签上的<code>.fade</code>类即可。</p>
                    <div class="bs-example">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fastModal">立即展现</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;div class="modal-dialog"&gt;
  &lt;div class="modal-content"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;span class="sr-only"&gt;关闭&lt;/span&gt;&lt;/button&gt;
      &lt;h4 class="modal-title"&gt;禁用动画效果演示&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="mzodal-body"&gt;...&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
                </pre>
                    </div>
                    <div class="modal" id="fastModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                                    <h4 class="modal-title">禁用动画效果演示</h4>
                                </div>
                                <div class="modal-body">...</div>
                            </div>
                        </div>
                    </div>
                    <h4 class="subitem-header" id="modal-responsive">模态框内容嵌套栅格系统</h4>
                    <p>为了模态框更好地利用栅格系统，只需要在<code>.modal-body</code>里面添加<code>.container-fluid</code>,这样就可以在容器里面正常使用栅格系统。</p>
                    <div id="gridSystemModal" class="modal fade"  role="dialog" aria-labelledby="gridModalLabel" style="display: none;">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="gridModalLabel">对话框标题</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-4">.col-md-4</div>
                                            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                                            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-9">
                                                Level 1: .col-sm-9
                                                <div class="row">
                                                    <div class="col-xs-8 col-sm-6">
                                                        Level 2: .col-xs-8 .col-sm-6
                                                    </div>
                                                    <div class="col-xs-4 col-sm-6">
                                                        Level 2: .col-xs-4 .col-sm-6
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary">保存</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <div class="bs-example bs-example-padded-bottom">
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
                            启动模态框
                        </button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class="modal-title" id="gridSystemModalLabel"&gt;Modal title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;.col-md-4&lt;/div&gt;
            &lt;div class="col-md-4 col-md-offset-4"&gt;.col-md-4 .col-md-offset-4&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-3 col-md-offset-3"&gt;.col-md-3 .col-md-offset-3&lt;/div&gt;
            &lt;div class="col-md-2 col-md-offset-4"&gt;.col-md-2 .col-md-offset-4&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-6 col-md-offset-3"&gt;.col-md-6 .col-md-offset-3&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-sm-9"&gt;
              Level 1: .col-sm-9
              &lt;div class="row"&gt;
                &lt;div class="col-xs-8 col-sm-6"&gt;
                  Level 2: .col-xs-8 .col-sm-6
                &lt;/div&gt;
                &lt;div class="col-xs-4 col-sm-6"&gt;
                  Level 2: .col-xs-4 .col-sm-6
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.modal-content --&gt;
  &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
            </pre>
                    </div>
                    <h4 class="subitem-header">关闭模态框</h4>
                    <p>在静态模态框HTML中增加一个按钮并添加data属性<code>data-dismiss="modal"</code>，这样当点击该按钮时会关闭此对话框。你可以将该属性添加至模态框内的任何元素。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;span class="sr-only"&gt;关闭&lt;/span&gt;&lt;/button&gt;
            </pre>
                    </div>
                    <h3 class="item-header" id="modal-usage">如何使用</h3>
                    <h4 class="subitem-header" id="modal-usage-data">使用data属性</h4>
                    <p>一般情况下不需要手动调用Javascript来使用模态框，只需要在触发模态框的按钮或链接上增加两个额外的data属性即可：<code>data-toggle="modal"</code>和<code>data-target="#myModal"</code>。</p>
                    <p>其中<code>data-toggle</code>属性声明该按钮或链接点击后会显示或隐藏模态框。<code>data-target</code>属性指明静态模态框的ID属性。</p>
                    <p>如果使用<code>&lt;a&gt;</code>触发模态框，可以直接将静态模块框的ID写在<code>href</code>属性内，<code>data-target</code>属性则可以忽略。</p>
                    <p>使用data属性也可以来为对话框提供其他参数。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;!-- 使用按钮 --&gt;
&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;启动模态框&lt;/button&gt;

&lt;!-- 使用超链接 --&gt;
&lt;a data-toggle="modal" href="#myModal"&gt;启动模态框&lt;/a&gt;
            </pre>
                    </div>
                    <h4 class="subitem-header" id="modal-usage-js">手动调用Javascript</h4>
                    <p>不使用按钮或链接来触发模态框也可以使用Javascript来手动触发。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myModal').modal(options)
            </pre>
                    </div>
                    <h4 class="subitem-header" id="modal-usage-options">参数</h4>
                    <p>参数既可以在手动调用的时候指定，也可以在静态模态框或者触发器上使用data属性来指定。</p>
                    <p>可用的参数如下：</p>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>参数</th>
                                <th style="width: 80px">名称</th>
                                <th style="width: 300px">可选值</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>backdrop</code></td>
                                <td>背景遮罩</td>
                                <td>
                                    <ul>
                                        <li><code>'static'</code></li>
                                        <li><code>true</code>（默认）</li>
                                        <li><code>false</code></li>
                                    </ul>
                                </td>
                                <td>使用布尔值来启用或禁用背景遮罩，如果指定为<code>'static'</code>则会启动背景遮罩，但点击背景遮罩时不会触发关闭模态框的过程。</td>
                            </tr>
                            <tr>
                                <td><code>keyboard</code></td>
                                <td>按键</td>
                                <td>
                                    <ul>
                                        <li><code>true</code>（默认）</li>
                                        <li><code>false</code></li>
                                    </ul>
                                </td>
                                <td>当为<code>ture</code>时，按下<code>esc</code>键会关闭模态框。</td>
                            </tr>
                            <tr>
                                <td><code>show</code></td>
                                <td>立即显示</td>
                                <td>
                                    <ul>
                                        <li><code>true</code>（默认）</li>
                                        <li><code>false</code></li>
                                    </ul>
                                </td>
                                <td>是否在模态框初始化之后立即显示出来。</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4 class="subitem-header" id="modal-usage-method">方法</h4>
                    <h5><code>.modal(options)</code></h5>
                    <p>使用参数对象来初始化模态框。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myModal').modal(
{
    keyboard : false,
    show     : true
})
              </pre>
                    </div>
                    <h5><code>.modal('toggle')</code></h5>
                    <p>手动打开或关闭模态框。<strong>在模态框显示或隐藏之前返回到主调函数中</strong>（也就是，在触发 <code>shown.bs.modal</code> 或 <code>hidden.bs.modal</code> 事件之前）。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myModal').modal('toggle')
              </pre>
                    </div>
                    <h5><code>.modal('show')</code></h5>
                    <p>手动打开模态框。<strong>在模态框显示之前返回到主调函数中</strong> （也就是，在触发 <code>shown.bs.modal</code> 事件之前）。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myModal').modal('show')
              </pre>
                    </div>
                    <h5><code>.modal('hide')</code></h5>
                    <p>手动隐藏模态框。<strong>在模态框隐藏之前返回到主调函数中</strong> （也就是，在触发 <code>hidden.bs.modal</code> 事件之前）。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myModal').modal('hide')
              </pre>
                    </div>
                    <h5><code>.modal('handleUpdate')</code></h5>
                    <p>重新调整模态框位置及大小</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myModal').modal('handleUpdate')
              </pre>
                    </div>
                    <h4 class="subitem-header" id="modal-usage-event">事件</h4>
                    <p>模态框提供了一系列事件用于监听模态框运行状态，便于在合适的时机运行你自己的代码。</p>
                    <p>在模态框本身自己触发事件 (i.e. at the <code>&lt;div class="modal"&gt;</code>)。</p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped bs-events-table">
                            <thead>
                                <tr>
                                    <th>事件类型</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>show.bs.modal</td>
                                    <td><code>show</code> 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 <code>relatedTarget</code> 属性进行访问。</td>
                                </tr>
                                <tr>
                                    <td>shown.bs.modal</td>
                                    <td>此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 <code>relatedTarget</code> 属性进行访问。</td>
                                </tr>
                                <tr>
                                    <td>hide.bs.modal</td>
                                    <td><code>hide</code> 方法调用之后立即触发该事件。</td>
                                </tr>
                                <tr>
                                    <td>hidden.bs.modal</td>
                                    <td>此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。</td>
                                </tr>
                                <tr>
                                    <td>loaded.bs.modal</td>
                                    <td>从<code>远端的数据源</code>加载完数据之后触发该事件。</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h4 class="subitem-header">使用要点</h4>
                    <ul>
                        <li>不能在一个模态框上重叠另一个模态框，也不支持在遮罩层同时显示两个以上的模态框；</li>
                        <li>静态模态框的HTML代码应该放在文档最高层级内，作为<code>&lt;body&gt;</code>的直接子元素，以避免与文档中的其他组件冲突；</li>
                        <li>模态框继承自Bootstrap模态框(v3.2)，包含其所有功能和接口。参考：<a target="_blank" href="http://getbootstrap.com/javascript/#modals">英</a>，<a target="_blank" href="http://v3.bootcss.com/javascript/#modals">中</a>。</li>
                    </ul>
                </div>
                <div class="bs-docs-section">
                    <h2 id="modalbox" class="page-header">ModalBox <small>modalbox.mower.js</small></h2>
                    <p>Mower为了增强模态框，引入第三方插件<a target="_blank" href="http://bootboxjs.com/" title="" data-original-title="这是一个第三方组件，点击访问网站"><i class="icon-heart"></i>bootbox</a>基础上，增加远程动态加载数据功能。</p>
                    <h3 class="item-header" id="modalbox-examples">实例</h3>
                    <h4 class="subitem-header" id="modalbox-alert">提示</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-modalbox-tip" type="button" class="btn btn-primary btn-lg">提示框</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="modalbox-tip" type="button" class="btn btn-primary btn-lg"&gt;提示框&lt;/button&gt;
&lt;script&gt;
$('#btn-modalbox-tip').click(function(event) {
  ModalBox.alert("Hello world!", function() {
   //TODO
 });
});
&lt;/script&gt;
            </pre>
                    </div>
                    <h4 class="subitem-header" id="modalbox-comfirm">确认</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-modalbox-comfirm" type="button" class="btn btn-primary btn-lg">确认框</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="modalbox-comfirm" type="button" class="btn btn-primary btn-lg"&gt;确认框&lt;/button&gt;
&lt;script&gt;
$('#btn-modalbox-comfirm').click(function(event) {
  MessageBox.confirm("Are you sure?", function(result) {
    //TODO
  }); 
});
&lt;/script&gt;
          </pre>
                    </div>
                    <h4 class="subitem-header" id="modalbox-custom-dialog">自定义模态框</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-modalbox-custom-dialog" type="button" class="btn btn-primary btn-lg">自定义框</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="btn-modalbox-custom-dialog" type="button" class="btn btn-primary btn-lg"&gt;自定义框&lt;/button&gt;
&lt;script&gt;
ModalBox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    danger: {
      label: "Danger!",
      className: "btn-danger",
      callback: function() {
        Example.show("uh oh, look out!");
      }
    },
    main: {
      label: "Click ME!",
      className: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }
});
&lt;/script&gt;
        </pre>
                    </div>
                    <h4 class="subitem-header" id="modalbox-custom-html">自定义HTML内容</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-modalbox-custom-html" type="button" class="btn btn-primary btn-lg">自定义HTML内容</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="btn-modalbox-custom-html" type="button" class="btn btn-primary btn-lg"&gt;自定义HTML内容&lt;/button&gt;
&lt;script&gt;
ModalBox.dialog({
  title: &quot;This is a form in a modal.&quot;,
  message: '&lt;div class=&quot;row&quot;&gt;  ' +
      '&lt;div class=&quot;col-md-12&quot;&gt; ' +
      '&lt;form class=&quot;form-horizontal&quot;&gt; ' +
      '&lt;div class=&quot;form-group&quot;&gt; ' +
      '&lt;label class=&quot;col-md-4 control-label&quot; for=&quot;name&quot;&gt;Name&lt;/label&gt; ' +
      '&lt;div class=&quot;col-md-4&quot;&gt; ' +
      '&lt;input id=&quot;name&quot; name=&quot;name&quot; type=&quot;text&quot; placeholder=&quot;Your name&quot; class=&quot;form-control input-md&quot;&gt; ' +
      '&lt;span class=&quot;help-block&quot;&gt;Here goes your name&lt;/span&gt; &lt;/div&gt; ' +
      '&lt;/div&gt; ' +
      '&lt;div class=&quot;form-group&quot;&gt; ' +
      '&lt;label class=&quot;col-md-4 control-label&quot; for=&quot;awesomeness&quot;&gt;How awesome is this?&lt;/label&gt; ' +
      '&lt;div class=&quot;col-md-4&quot;&gt; &lt;div class=&quot;radio&quot;&gt; &lt;label for=&quot;awesomeness-0&quot;&gt; ' +
      '&lt;input type=&quot;radio&quot; name=&quot;awesomeness&quot; id=&quot;awesomeness-0&quot; value=&quot;Really awesome&quot; checked=&quot;checked&quot;&gt; ' +
      'Really awesome &lt;/label&gt; ' +
      '&lt;/div&gt;&lt;div class=&quot;radio&quot;&gt; &lt;label for=&quot;awesomeness-1&quot;&gt; ' +
      '&lt;input type=&quot;radio&quot; name=&quot;awesomeness&quot; id=&quot;awesomeness-1&quot; value=&quot;Super awesome&quot;&gt; Super awesome &lt;/label&gt; ' +
      '&lt;/div&gt; ' +
      '&lt;/div&gt; &lt;/div&gt;' +
      '&lt;/form&gt; &lt;/div&gt;  &lt;/div&gt;',
  buttons: {
      success: {
          label: &quot;Save&quot;,
          className: &quot;btn-success&quot;,
          callback: function () {
              var name = $('#name').val();
              var answer = $(&quot;input[name='awesomeness']:checked&quot;).val()
              Example.show(&quot;Hello &quot; + name + &quot;. You've chosen &lt;b&gt;&quot; + answer + &quot;&lt;/b&gt;&quot;);
          }
      }
  }
}
);  
&lt;/script&gt;
      </pre>
                    </div>
                    <h4 class="subitem-header" id="modalbox-custom-ajax">Ajax加载内容</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-modalbox-custom-html" type="button" data-url="partial/remote-modal.html" data-title="ajax" data-toggle="modalbox" class="btn btn-primary btn-lg">Ajax加载内容</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
 &lt;button id="btn-modalbox-custom-html" type="button" data-url="partial/remote-modal.html" data-title="ajax" data-toggle="modalbox" class="btn btn-primary btn-lg"&gt;Ajax加载内容&lt;/button&gt;
      </pre>
                    </div>
                    <h3 class="item-header" id="modalbox-usage">如何使用</h3>
                    <h4 class="subitem-header" id="modalbox-usage-data">使用data属性</h4>
                    <p>除了<code>Ajax远程加载</code>只需要在触发模态框的按钮或链接上增加两个额外的data属性即可：<code>data-toggle="modalbox"</code>和<code>data-url="[http url]"</code>。</p>
                    <p>其他类型只能通过javascript去调用。</p>
                    <div class="highlight">
                        <pre class="prettyprint">

&lt;button id="btn-modalbox-custom-html" type="button" data-url="partial/remote-modal.html" data-title="ajax" data-toggle="modalbox" class="btn btn-primary btn-lg"&gt;Ajax加载内容&lt;/button&gt;

 </pre>
                    </div>
                    <h4 class="subitem-header" id="modalbox-usage-js">手动调用Javascript</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;script&gt;
ModalBox.alert("Hello world!", function() {
//TODO
});
ModalBox.comfirm("Hello world!", function() {
//TODO
});
ModalBox.prompt("Hello world!", function() {
//TODO
});
ModalBox.dialog("Hello world!", function() {
//TODO
});
ModalBox.ajaxDialog({
  "url":"xxx"
});
&lt;/script&gt;
        </pre>
                    </div>
                    <h4 class="subitem-header" id="modalbox-usage-options">参数</h4>
                    <p>
                        这里仅罗列常用参数，更多参数请参考<a target="_blank" href="http://bootboxjs.com/" title="" data-original-title="这是一个第三方组件，点击访问网站"><i class="icon-heart"></i>bootbox</a>
                    </p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <colgroup>
                                <col class="col-name">
                                    <col class="col-type">
                                        <col class="col-description">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <p>message</p>
                                        <span class="label label-danger">
                            必选
                        </span>
                                    </td>
                                    <td>String | Element</td>
                                    <td>
                                        <p>
                                            模态框显示内容
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>title</td>
                                    <td>String | Element</td>
                                    <td>
                                        <p>
                                            模态框标题，把值填充在 in an <code>&lt;h4&gt;</code> 元素里面.
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>callback</p>
                                        <span class="label label-danger">
                            必选 *
                        </span>
                                    </td>
                                    <td>Function</td>
                                    <td>
                                        <p class="bg-info">
                                            * 提示 callback事件非必选.
                                        </p>
                                        <pre class="prettyprint"><code><span class="hljs-tag">ModalBox</span><span class="hljs-class">.alert</span>(<span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">message</span>:<span class="hljs-value"> <span class="hljs-string">"I'm an alert!"</span>, callback: <span class="hljs-function">function</span>() {</span></span></span>} })</code></pre>
                                        <p>
                                            确认和提醒的回调事件必须包含返回值参数，例如确认返回
                                            <code>true</code> or <code>false</code> , 而提醒返回用户输入信息值。
                                        </p>
                                        <pre class="prettyprint"><code>ModalBox.confirm(<span class="hljs-string">"Are you sure?"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(result)</span> </span>{
<span class="hljs-comment">// result will be true or false</span>
}); </code></pre>
                                        <p>
                                            or
                                        </p>
                                        <pre class="prettyprint"><code>ModalBox.prompt(<span class="hljs-string">"What is your name?"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(result)</span> </span>{
<span class="hljs-keyword">if</span> (result === <span class="hljs-literal">null</span>) {
<span class="hljs-comment">// Prompt dismissed</span>
} <span class="hljs-keyword">else</span> {
<span class="hljs-comment">// result has a value</span>
}
}); </code></pre>
                                        <p>
                                            Default: <code>null</code>
                                        </p>
                                    </td>
                                </tr>
                                </tr>
                            </tbody>
                        </table>
                        <div class="alert alert-info alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                            <p>Ajax加载内容额外参数</p>
                        </div>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>参数</th>
                                    <th>名称</th>
                                    <th>可选值</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>type</code></td>
                                    <td>模态框类型</td>
                                    <td>
                                        <ul>
                                            <li><code>'custom'</code>（默认），自定义类型</li>
                                            <li><code>'iframe'</code></li>
                                            <li><code>'ajax'</code></li>
                                        </ul>
                                    </td>
                                    <td>通常该参数和参数<code>url</code>一起使用，当指定了<code>custom</code>、<code>remote</code>和<code>iframe</code>参数时该参数可以忽略</td>
                                </tr>
                                <tr>
                                    <td><code>url</code></td>
                                    <td>远程内容地址</td>
                                    <td>
                                        远程地址字符串
                                    </td>
                                    <td>通常该参数和<code>type</code>一起似乎用，当指定了<code>custom</code>、<code>remote</code>和<code>iframe</code>参数时该参数可以忽略</td>
                                </tr>
                                <tr>
                                    <td><code>remote</code></td>
                                    <td>Ajax内容地址</td>
                                    <td>
                                        远程地址字符串
                                    </td>
                                    <td>如果使用该参数，则参数<code>type</code>和<code>url</code>可以忽略</td>
                                </tr>
                                <tr>
                                    <td><code>iframe</code></td>
                                    <td>iframe页面地址</td>
                                    <td>
                                        远程地址字符串
                                    </td>
                                    <td>如果使用该参数，则参数<code>type</code>和<code>url</code>可以忽略</td>
                                </tr>
                                <tr>
                                    <td><code>size</code></td>
                                    <td>模态框大小</td>
                                    <td>
                                        <ul>
                                            <li><code>''</code>（默认），默认大小</li>
                                            <li><code>'lg'</code>，大模态框</li>
                                            <li><code>'sm'</code>，小模态框</li>
                                            <li><code>'fullscreen'</code>，全屏显示</li>
                                        </ul>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><code>width</code></td>
                                    <td>模态框宽度</td>
                                    <td>
                                        <ul>
                                            <li><code>null</code>（默认），默认宽度</li>
                                            <li>其他表示宽度的CSS值字符串</li>
                                        </ul>
                                    </td>
                                    <td>如果使用<code>size</code>参数，则可以忽略该参数</td>
                                </tr>
                                <tr>
                                    <td><code>height</code></td>
                                    <td>模态框宽度</td>
                                    <td>
                                        <ul>
                                            <li><code>'auto'</code>（默认），自动根据内容调整</li>
                                            <li>其他表示高度的CSS值字符串</li>
                                        </ul>
                                    </td>
                                    <td>如果指定了高度不是<code>'auto'</code>则可能出现内容与高度不匹配的情况。</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 id="messagebox" class="page-header">消息框 <small>messagebox.mower.js</small></h2>
                    <p>Mower为了增强消息提醒体验和友好性，引入第三方插件<a target="_blank" href="https://github.com/CodeSeven/toastr" title="" data-original-title="这是一个第三方组件，点击访问网站">bootbox</a>。</p>
                    <h3 class="item-header" id="messagebox-examples">实例</h3>
                    <h4 class="subitem-header" id="messagebox-warning">警告提示消息</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-messagebox-warning" type="button" class="btn btn-primary btn-lg">警告</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="btn-messagebox-warning" type="button" class="btn btn-primary btn-lg"&gt;警告&lt;/button&gt;
&lt;script&gt;
$('#btn-messagebox-warning').click(function(event) {
MessageBox.warning("Hello world!");
});
&lt;/script&gt;
          </pre>
                    </div>
                    <h4 class="subitem-header" id="messagebox-success">成功提示消息</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-messagebox-success" type="button" class="btn btn-primary btn-lg">成功</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="btn-messagebox-success" type="button" class="btn btn-primary btn-lg"&gt;成功&lt;/button&gt;
&lt;script&gt;
$('#btn-messagebox-success').click(function(event) {
MessageBox.success('Have fun storming the castle!', 'title-success'); 
});
&lt;/script&gt;
        </pre>
                    </div>
                    <h4 class="subitem-header" id="messagebox-error">错误提示信息</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-messagebox-error" type="button" class="btn btn-primary btn-lg">错误</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="btn-messagebox-error" type="button" class="btn btn-primary btn-lg"&gt;错误&lt;/button&gt;
&lt;script&gt;
$('#btn-messagebox-error').click(function(event) {
MessageBox.error('I do not think that word means what you think it means.', 'title-error!'); 
});
&lt;/script&gt;
      </pre>
                    </div>
                    <h4 class="subitem-header" id="messagebox-info">提示信息</h4>
                    <div class="bs-example bs-example-padded-bottom">
                        <button id="btn-messagebox-info" type="button" class="btn btn-primary btn-lg">提示</button>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;button id="btn-messagebox-info" type="button" class="btn btn-primary btn-lg"&gt;提示&lt;/button&gt;
&lt;script&gt;
$('#btn-messagebox-info').click(function(event) {
 MessageBox.info('这里是提示信息内容.', '提示'); 
});
&lt;/script&gt;
    </pre>
                    </div>
                    <h3 class="item-header" id="messagebox-usage">如何使用</h3>
                    <h4 class="subitem-header" id="messagebox-usage-js">手动调用Javascript</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;script&gt;
// Display a warning toast, with no title
MessageBox.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Display a success toast, with a title
MessageBox.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
MessageBox.error('I do not think that word means what you think it means.', 'Inconceivable!')

// Immediately remove current toasts without using animation
MessageBox.remove()

// Remove current toasts using animation
MessageBox.clear()

// Override global options
MessageBox.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})
&lt;/script&gt;
      </pre>
                    </div>
                    <h4 class="subitem-header" id="messagebox-usage-options">参数</h4>
                    <p>
                        这里仅罗列常用参数，更多参数请参考<a target="_blank" href="https://github.com/CodeSeven/toastr" title="" data-original-title="这是一个第三方组件，点击访问网站"><i class="icon-heart"></i>toastr</a>
                    </p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <colgroup>
                                <col class="col-name">
                                    <col class="col-type">
                                        <col class="col-description">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <p>closeButton</p>
                                    </td>
                                    <td>boolean</td>
                                    <td>
                                        <p>
                                            是否显示关闭按钮
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>positionClass</td>
                                    <td>String</td>
                                    <td>
                                        <p>
                                            设置框位置样式，例如：toast-top-right、toast-buttom-left、toast-bottom-full-width、toast-top-center等等组合
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>timeOut</p>
                                    </td>
                                    <td>integer</td>
                                    <td>
                                        显示时长，单位毫秒。可以同时设置timeout和extendedTimeOut为0，消息框将不会自动消失。
                                    </td>
                                </tr>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 id="tooltip" class="item-header" class="page-header">提示消息 </h2>
                    <h3 class="item-header" id="tooltip-examples">实例</h3>
                    <h4 class="subitem-header">一般工具提示</h4>
                    <div class="bs-example tooltip-demo">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, cupiditate, eius, modi, veniam iure perspiciatis hic vitae quisquam ullam animi ipsum repellat temporibus
                            <a href="#" data-toggle="tooltip" title="This is a tooltip">have a</a> officiis voluptatibus nostrum laborum debitis quidem illo deleniti iste! Minima, facilis aut explicabo debitis fugit dolor sint at soluta nulla omnis itaque
                            <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> illum commodi numquam enim quod architecto molestias qui eveniet et amet
                            <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> laborum quisquam quam provident esse beatae quas impedit voluptas nostrum
                            <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> aspernatur deleniti suscipit blanditiis dignissimos temporibus eligendi quae corrupti
                            <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> pariatur quo! Enim, ipsa, odio quasi laboriosam provident id nihil maxime architecto dolorum quas harum veniam perspiciatis tempora ducimus qui! Rem, obcaecati reiciendis officia quam.
                        </p>
                    </div>
                    <h4 id="tooltip-examples-direction" class="subitem-header">不同方向的提示</h4>
                    <div class="bs-example tooltip-demo">
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">左侧Tooltip</button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">上方Tooltip</button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">下方Tooltip</button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">右侧Tooltip</button>
                    </div>
                    <h3>注意</h3>
                    <div class="alert alert-danger">
                        <h5>选择性加入的功能</h5>
                        <p>
                            出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 <strong>你必须自己初始化他们</strong> 。
                        </p>
                    </div>
                    <div class="alert alert-info">
                        <h5>工具提示与按钮组和输入框组联合使用时需要一些特殊设置</h5>
                        <p>
                            在
                            <code>.btn-group</code> 或
                            <code>.input-group</code> 内的元素上使用工具提示时，你需要指定
                            <code>container: 'body'</code> 选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
                        </p>
                    </div>
                    <div class="alert alert-info">
                        <h5>在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来</h5>
                        <p>
                            为了给
                            <code>disabled</code> 或
                            <code>.disabled</code> 元素添加工具提示，将需要增加工具提示的页面元素包裹在一个
                            <code>&lt;div&gt;</code> 中，然后对这个
                            <code>&lt;div&gt;</code> 元素应用工具提示。
                        </p>
                    </div>
                    <h3 class="item-header" id="tooltips-usage">用法</h3>
                    <h4 class="subitem-header" id="tooltips-usage-rel">通过 <code>rel="tooltip"</code>激活工具提示</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;a href="#" data-toggle="tooltip" rel="tooltip" title="Some tooltip text!"&gt;Hover over me&lt;/a&gt;
            </pre>
                    </div>
                    <h4 class="subitem-header" id="tooltips-usage-js">通过JavaScript激活工具提示</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
$(<span class="string">'#bs-example'</span>).tooltip(options)
            </pre>
                    </div>
                    <h4 class="subitem-header">Markup</h4>
                    <p>
                        The generated markup of a tooltip is rather simple, though it does require a position (by default, set to
                        <code>top</code> by the plugin).
                    </p>
                    <div class="highlight">
                        <pre class="prettyprint ">
&lt;div class=&quot;tooltip&quot;&gt;
&lt;div class=&quot;tooltip-inner&quot;&gt;
  Tooltip!
&lt;/div&gt;
&lt;div class=&quot;tooltip-arrow&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
          </pre>
                    </div>
                    <h4 class="subitem-header" id="#tooltips-option">参数</h4>
                    <p>
                        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                        <code>data-</code> 之后，例如
                        <code>data-animation=""</code> 。
                    </p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 100px;">名称</th>
                                    <th style="width: 100px;">类型</th>
                                    <th style="width: 50px;">默认值</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>animation</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>决定是否应用淡入淡出动画。</td>
                                </tr>
                                <tr>
                                    <td>html</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>
                                        是否允许展示html标签。
                                    </td>
                                </tr>
                                <tr>
                                    <td>placement</td>
                                    <td>string | function</td>
                                    <td>'top'</td>
                                    <td>
                                        top | bottom | left | right | auto.
                                        <br> 显示的位置。
                                    </td>
                                </tr>
                                <tr>
                                    <td>selector</td>
                                    <td>string</td>
                                    <td>false</td>
                                    <td>
                                        当需要为动态DOM应用工具提示，需要手动指定选择器。
                                    </td>
                                </tr>
                                <tr>
                                    <td>title</td>
                                    <td>string | function</td>
                                    <td>''</td>
                                    <td>
                                        标题。
                                    </td>
                                </tr>
                                <tr>
                                    <td>trigger</td>
                                    <td>string</td>
                                    <td>'hover focus'</td>
                                    <td>
                                        click | hover | focus | manual. 触发方式。
                                    </td>
                                </tr>
                                <tr>
                                    <td>delay</td>
                                    <td>number | object</td>
                                    <td>0</td>
                                    <td>
                                        <p>
                                            如果指定，则应用延迟。
                                        </p>
                                        <p>
                                            <code>delay: { show: 500, hide: 100 }</code>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>container</td>
                                    <td>string | false</td>
                                    <td>false</td>
                                    <td>
                                        <p>
                                            决定相对位置的父级容器。
                                            <code>container: 'body'</code>
                                        </p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
                    <div class="bs-callout bs-callout-info">
                        <h4>对单个工具提示使用data属性</h4>
                        <p>使用data属性可以为单个工具提示指定额外选项，如下所示。</p>
                    </div>
                    <h4 class="subitem-header">标记</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;a href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;first tooltip&quot;&gt;Hover over me&lt;/a&gt;
</pre>
                    </div>
                    <h4 class="subitem-header" id="tooltip-function">方法</h4>
                    <h4>$().tooltip(options)</h4>
                    <p>为一组元素应用工具提示。</p>
                    <h4>.tooltip('show')</h4>
                    <p>展示工具提示。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#element').tooltip('show');
            </pre>
                    </div>
                    <h4>.tooltip('hide')</h4>
                    <p>隐藏工具提示。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#element').tooltip('hide');
          </pre>
                    </div>
                    <h4>.tooltip('toggle')</h4>
                    <p>展示或隐藏工具提示。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#element').tooltip('toggle');
          </pre>
                    </div>
                    <h4>.tooltip('destroy')</h4>
                    <p>隐藏并销毁工具提示。</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#element').tooltip('destroy');
          </pre>
                    </div>
                    <h4 class="subitem-header" id="tooltip-event">事件</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 150px;">事件类型</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>show.bs.tooltip</td>
                                    <td>
                                        当
                                        <code>show</code> 方法被调用之后，此事件将被立即触发。
                                    </td>
                                </tr>
                                <tr>
                                    <td>shown.bs.tooltip</td>
                                    <td>当工具提示展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
                                </tr>
                                <tr>
                                    <td>hide.bs.tooltip</td>
                                    <td>
                                        当
                                        <code>hide</code> 方法被调用之后，此事件被触发。
                                    </td>
                                </tr>
                                <tr>
                                    <td>hidden.bs.tooltip</td>
                                    <td>当工具提示被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})    
            </pre>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h3 id="popover" class="page-header">弹出框 </h3>
                    <div class="alert alert-danger">
                        <h4>插件依赖</h4>
                        <p>
                            弹出框依赖
                            <a href="#tooltips">工具提示插件</a> ，因此需要先加载工具提示插件。
                        </p>
                    </div>
                    <div class="alert alert-danger">
                        <h4>选择性加入的功能</h4>
                        <p>
                            出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 <strong>你必须自己初始化他们</strong> 。
                        </p>
                    </div>
                    <div class="alert alert-info">
                        <h4>弹出框在按钮组和输入框组中使用时，需要额外的设置</h4>
                        <p>
                            当提示框与
                            <code>.btn-group</code> 或
                            <code>.input-group</code> 联合使用时，你需要指定
                            <code>container: 'body'</code> 选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
                        </p>
                    </div>
                    <div class="alert alert-info">
                        <h4>在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来</h4
          <p>为了给
            <code>disabled</code>
            或
            <code>.disabled</code>
            元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个
            <code>&lt;div&gt;</code>
            中，然后对这个
            <code>&lt;div&gt;</code>
            元素应用弹出框。
          </p>
        </div>
        <h3 class="item-header" id="popover-examples">类型</h3>
        <h4 class="subitem-header" id="popover-examples-static">静态类型</h4>
                        <div class="bs-example bs-example-popover">
                            <div class="popover top">
                                <div class="arrow"></div>
                                <h3 class="popover-title">Popover top</h3>
                                <div class="popover-content">
                                    <p>
                                        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                    </p>
                                </div>
                            </div>
                            <div class="popover right">
                                <div class="arrow"></div>
                                <h3 class="popover-title">Popover right</h3>
                                <div class="popover-content">
                                    <p>
                                        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                    </p>
                                </div>
                            </div>
                            <div class="popover bottom">
                                <div class="arrow"></div>
                                <h3 class="popover-title">Popover bottom</h3>
                                <div class="popover-content">
                                    <p>
                                        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                    </p>
                                </div>
                            </div>
                            <div class="popover left">
                                <div class="arrow"></div>
                                <h3 class="popover-title">Popover left</h3>
                                <div class="popover-content">
                                    <p>
                                        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                    </p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <h4 class="subitem-header">不带箭头指示</h4>
                        <div class="bs-example bs-example-popover">
                            <div class="popover">
                                <div class="arrow"></div>
                                <h3 class="popover-title">Popover top</h3>
                                <div class="popover-content">
                                    <p>
                                        Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                    </p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <h4 class="subitem-header" id="popover-examples-dynamic">动态演示</h4>
                        <div class="bs-example">
                            <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title" rel="popover">打开弹出框</a>
                        </div>
                        <h4 class="subitem-header" id="popover-examples-direction">不同方向</h4>
                        <div class="bs-example">
                            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="" rel="popover">左侧弹框</button>
                            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="" rel="popover">上方弹框</button>
                            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="" rel="popover">下方弹框</button>
                            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="" rel="popover">右侧弹框</button>
                        </div>
                        <h4 class="subitem-header" id="popover-examples-disable"><a class="anchorjs-link" href="#-8"></a>点击并让弹出框消失</h4>
                        <p>通过使用 <code>focus</code> 触发器可以在用户点击弹出框是让其消失。</p>
                        <div class="bs-callout bs-callout-danger">
                            <h4>实现“点击并让弹出框消失”的效果需要一些额外的代码</h4>
                            <p>为了更好的跨浏览器和跨平台效果，你必须使用 <code>&lt;a&gt;</code> 标签，<i>不能</i>使用 <code>&lt;button&gt;</code> 标签，并且，还必须包含 <code>role="button"</code> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> 属性。</p>
                        </div>
                        <div class="bs-example">
                            <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" rel="popover">可消失的弹出框</a>
                        </div>
                        <h3 class="item-header" id="popovers-usage">如何使用</h3>
                        <h4 class="subitem-header" id="popovers-usage-rel">通过 <code>rel="tooltip"</code>激活工具提示</h4>
                        <div class="highlight">
                            <pre class="prettyprint">

&lt;a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" rel="popover"&gt;可消失的弹出框&lt;/a&gt;
          </pre>
                        </div>
                        <h4 class="subitem-header" id="tooltips-usage-js">通过JavaScript启用弹出框</h4>
                        <div class="highlight">
                            <p class="prettyprint">
                                <code>$('#example').popover(options)</code>
                            </p>
                        </div>
                        <h4>使用要点</h4>
                        <ul>
                            <li>弹出框依赖 <a href="#javascript/tooltips">工具提示插件</a> ，因此需要先加载工具提示插件。</li>
                            <li>出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 <strong>你必须自己初始化他们</strong>。</li>
                            <li>弹出框在按钮组和输入框组中使用时，需要额外的设置：当提示框与 <code>.btn-group</code> 或 <code>.input-group</code> 联合使用时，你需要指定 <code>container: 'body'</code>选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。</li>
                            <li>在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来：为了给 <code>disabled</code> 或 <code>.disabled</code> 元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个 <code>&lt;div&gt;</code> 中，然后对这个 <code>&lt;div&gt;</code> 元素应用弹出框。</li>
                        </ul>
                        <h4 class="subitem-header" id="popovers-option">参数</h4>
                        <p>
                            可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                            <code>data-</code> 之后，例如
                            <code>data-animation=""</code> 。
                        </p>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 100px;">名称</th>
                                        <th style="width: 100px;">类型</th>
                                        <th style="width: 50px;">默认值</th>
                                        <th>描述</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>animation</td>
                                        <td>boolean</td>
                                        <td>true</td>
                                        <td>是否应用淡入淡出动画。</td>
                                    </tr>
                                    <tr>
                                        <td>html</td>
                                        <td>boolean</td>
                                        <td>false</td>
                                        <td>
                                            是否允许内容中包含html。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>placement</td>
                                        <td>string | function</td>
                                        <td>'right'</td>
                                        <td>
                                            top | bottom | left | right | auto.
                                            <br> 显示位置
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>selector</td>
                                        <td>string</td>
                                        <td>false</td>
                                        <td>
                                            当需要给动态的DOM元素应用工具提示时，需要手动制定选择器。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>trigger</td>
                                        <td>string</td>
                                        <td>'click'</td>
                                        <td>click | hover | focus | manual，决定交互方式。</td>
                                    </tr>
                                    <tr>
                                        <td>title</td>
                                        <td>string | function</td>
                                        <td>''</td>
                                        <td>
                                            标题
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>content</td>
                                        <td>string | function</td>
                                        <td>''</td>
                                        <td>
                                            内容
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>delay</td>
                                        <td>number | object</td>
                                        <td>0</td>
                                        <td>
                                            <p>
                                                是否延迟展示。
                                            </p>
                                            <p>
                                                <code>delay: { show: 500, hide: 100 }</code>
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>container</td>
                                        <td>string | false</td>
                                        <td>false</td>
                                        <td>
                                            <p>
                                                决定相对位置的父级容器。
                                            </p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                        <div class="bs-callout bs-callout-info">
                            <h4>为单个弹出框应用data属性</h4>
                            <p>对单个弹出框可以通过data属性单独指定选项，如上所示。</p>
                        </div>
                        <h4 class="subitem-header" id="popover-function">方法</h4>
                        <h4>$().popover(options)</h4>
                        <p>为一组元素初始化弹出框。</p>
                        <h4>.popover('show')</h4>
                        <p>显示弹出框。</p>
                        <div class="bs-example">
                            <p>
                                <code>js$(&#39;#element&#39;).popover(&#39;show&#39;)</code>
                            </p>
                        </div>
                        <h4>.popover('hide')</h4>
                        <p>隐藏弹出框。</p>
                        <div class="bs-example">
                            <p>
                                <code>js$(&#39;#element&#39;).popover(&#39;hide&#39;)</code>
                            </p>
                        </div>
                        <h4>.popover('toggle')</h4>
                        <p>展示或隐藏弹出框。</p>
                        <div class="bs-example">
                            <p>
                                <code>js$(&#39;#element&#39;).popover(&#39;toggle&#39;)</code>
                            </p>
                        </div>
                        <h4>.popover('destroy')</h4>
                        <p>隐藏并销毁弹出框。</p>
                        <div class="bs-example">
                            <p>
                                <code>js$(&#39;#element&#39;).popover(&#39;destroy&#39;)</code>
                            </p>
                        </div>
                        <h4 class="subitem-header" id="popover-event">事件</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 150px;">事件类型</th>
                                        <th>描述</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>show.bs.popover</td>
                                        <td>
                                            当
                                            <code>show</code> 方法被调用之后，此事件将被立即触发。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>shown.bs.popover</td>
                                        <td>当弹出框展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
                                    </tr>
                                    <tr>
                                        <td>hide.bs.popover</td>
                                        <td>
                                            当
                                            <code>hide</code> 方法被调用之后，此事件被触发。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>hidden.bs.popover</td>
                                        <td>当弹出框被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                        <div class="highlight">
                            <pre class="prettyprint">
  $('#myPopover').on('hidden.bs.popover', function () {
    // do something…
  })
</pre>
                        </div>
                    </div>
                    <div class="bs-docs-section">
                        <h2 class="page-header" id="dropdown">下拉菜单</h2>
                        <h3 class="item-header">类型</h3>
                        <h4 class="subitem-header" id="dropdown-type">基本类型</h4>
                        <p>将下拉菜单触发器和下拉菜单都包裹在<code>.dropdown</code>里，或者另一个声明了<code>position: relative</code>;的元素。然后添加组成菜单的HTML代码。
                        </p>
                        <p>通过是否指定data-toggle='dropdown'来开关下拉菜单。</p>
                        <div class="bs-example">
                            <div style="postion:relative;">
                                <div class="dropdown">
                                    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
                                        操作
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                        <li role="presentation" class="dropdown-header">Dropdown header</li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                        <li>
                                            <a href="#">删除</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li role="presentation" class="dropdown-header">Dropdown header</li>
                                        <li>
                                            <a href="#">修改</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="example"&gt;
  &lt;div class="dropdown"&gt;
    &lt;button class="btn dropdown-toggle" type="button" data-toggle="dropdown"&gt;
      操作
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
      &lt;li role="presentation" class="dropdown-header"&gt;Dropdown header&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;编辑&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;删除&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li role="presentation" class="dropdown-header"&gt;Dropdown header&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;修改&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
              </pre>
                        </div>
                        <h4 class="subitem-header" id="dropdown-type-navbar">导航条下拉菜单</h4>
                        <div class="bs-example">
                            <nav id="navbar-example" class="navbar navbar-default">
                                <div class="container-fluid">
                                    <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
                                        <ul class="nav navbar-nav">
                                            <li class="active">
                                                <a href="#">首页</a>
                                            </li>
                                            <li>
                                                <a href="#">演示</a>
                                            </li>
                                            <li>
                                                <a href="#">下载</a>
                                            </li>
                                            <li class="">
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            团队
                            <span class="caret"></span>
                          </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="#">关于我们</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">开发计划</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a href="#">开源代码</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">团队博客</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- /.nav-collapse -->
                                </div>
                                <!-- /.container-fluid -->
                            </nav>
                            <!-- /navbar-example -->
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;nav id="navbar-example" class="navbar navbar-default"&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="collapse navbar-collapse bs-example-js-navbar-collapse"&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;
          &lt;a href="#"&gt;首页&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;演示&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;下载&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=""&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;
            团队
            &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;关于我们&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;开发计划&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;开源代码&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;团队博客&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
  &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
&lt;/nav&gt; &lt;!-- /navbar-example --&gt;
                </pre>
                        </div>
                        <h4 class="subitem-header" id="dropdown-type-tabs">标签下拉菜单</h4>
                        <div class="bs-example">
                            <div style="position:relative;">
                                <div class="dropdown">
                                    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
                      操作
                      <span class="caret"></span>
                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                        <li>
                                            <a href="#">删除</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a href="#">修改</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div style="position:relative;"&gt;
  &lt;div class="dropdown"&gt;
    &lt;a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"&gt;
      操作
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;编辑&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;删除&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;修改&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
                </pre>
                        </div>
                        <h4 class="subitem-header" id="dropdown-type-buttons">按钮下拉菜单</h4>
                        <div class="bs-example">
                            <div class="btn-group">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                                    操作
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li>
                                        <a href="#">编辑</a>
                                    </li>
                                    <li>
                                        <a href="#">删除</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="#">修改</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">操作</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="#">编辑</a>
                                    </li>
                                    <li>
                                        <a href="#">删除</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="#">增加</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="btn-group"&gt;
&lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
  操作
  &lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;编辑&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;删除&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="divider"&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;修改&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="btn-group"&gt;
&lt;button type="button" class="btn btn-default"&gt;操作&lt;/button&gt;
&lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
  &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu" role="menu"&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;编辑&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;删除&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="divider"&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;增加&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
                </pre>
                        </div>
                        <h3 class="item-header">变化</h3>
                        <h4 class="subitem-header" id="dropdown-poptype">弹出方式</h4>
                        <div class="bs-example">
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-default">向上</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="#">div.btn-group.dropup</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">默认向下</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="#">div.btn-group</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">下右</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li>
                                        <a href="#">div.btn-group &gt; ul.dropdown-menu.pull-right</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-default">向右</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li>
                                        <a href="#">div.btn-group.dropup &gt; ul.dropdown-menu.pull-right</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="btn-group dropup"&gt;
  &lt;button type="button" class="btn btn-default"&gt;向上&lt;/button&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu" role="menu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;div.btn-group.dropup&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default"&gt;默认向下&lt;/button&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu" role="menu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;div.btn-group&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default"&gt;下右&lt;/button&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu pull-right" role="menu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;div.btn-group &gt; ul.dropdown-menu.pull-right&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="btn-group dropup"&gt;
  &lt;button type="button" class="btn btn-default"&gt;向右&lt;/button&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu pull-right" role="menu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;div.btn-group.dropup &gt; ul.dropdown-menu.pull-right&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
                </pre>
                        </div>
                        <h4 class="subitem-header" id="dropdown-title-disable">小标题和禁用</h4>
                        <p>通过<code>li.dropdown-header</code>增加小标题，为li增加<code>.disabled</code>来禁用。</p>
                        <div class="bs-example">
                            <div style="position:relative">
                                <div class="dropdown">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                                        操作
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li class="dropdown-header">基本操作</li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                        <li class="disabled">
                                            <a role="menuitem"  href="#">修改</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">其他操作</li>
                                        <li>
                                            <a href="#">增加</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div style="position:relative"&gt;
  &lt;div class="dropdown"&gt;
    &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
      操作
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu"&gt;
      &lt;li class="dropdown-header"&gt;基本操作&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;编辑&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="disabled"&gt;
        &lt;a role="menuitem"  href="#"&gt;修改&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li class="dropdown-header"&gt;其他操作&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;增加&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
                </pre>
                        </div>
                        <h3 class="item-header" id="dropdown-usage">如何使用</h3>
                        <p>通过data属性或者javascript调用，使得下拉菜单父亲节点增加<code>.open</code>显示下拉菜单里面的隐藏内容。</p>
                        <h4 class="subitem-header" id="dropdown-usage-data">使用data属性来调用</h4>
                        <p>在链接或者按钮上面增加<code>data-toggle="dropdown"</code>控制下拉菜单。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="dropdown"&gt;
  &lt;button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
    下拉触发按钮
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu" aria-labelledby="dLabel"&gt;
    ...
  &lt;/ul&gt;
&lt;/div&gt;
                </pre>
                        </div>
                        <p>为了保持链接按钮有效性，可以使用<code>data-target</code>代替<code>href="#"</code></p>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="dropdown"&gt;
  &lt;a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
   下拉触发链接
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;

  &lt;ul class="dropdown-menu" aria-labelledby="dLabel"&gt;
    ...
  &lt;/ul&gt;
&lt;/div&gt;
                </pre>
                        </div>
                        <h4 class="subitem-header" id="dropdown-usage-js">使用javascript来调用</h4>
                        <p>通过javascript调用</p>
                        <div class="highlight">
                            <pre class="prettyprint">
$('.dropdown-toggle').dropdown()
                </pre>
                        </div>
                        <div class="alert alert-warning" id="callout-dropdowns-data-required">
                            <h4><code>data-toggle="dropdown"</code> 必须的</h4>
                            <p>不管使用的是data属性还是javascript, <code>data-toggle="dropdown"</code> 总是需要在触发元素上面的.</p>
                        </div>
                        <h4 class="subitem-header" id="dropdown-usage-method">方法</h4>
                        <p><code>$().dropdown('toggle')</code></p>
                        <h4 class="subitem-header" id="dropdown-usage-event">事件</h4>
                        <p>所有事件触发都在<code>.dropdown-menu</code>父亲元素上面。</p>
                        <p>在事件触发源里面有属性<code>relatedTarget</code>指向触发源。</p>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped bs-events-table">
                                <thead>
                                    <tr>
                                        <th>事件</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><code>show.bs.dropdown</code></td>
                                        <td>当下拉框的show方法被调用时立即发生.</td>
                                    </tr>
                                    <tr>
                                        <td><code>shown.bs.dropdown</code></td>
                                        <td>当下拉框完全显示后发生（执行完显示动画之后）.</td>
                                    </tr>
                                    <tr>
                                        <td><code>hide.bs.dropdown</code></td>
                                        <td>当下拉框的hide方法被调用时立即发生.</td>
                                    </tr>
                                    <tr>
                                        <td><code>hidden.bs.dropdown</code></td>
                                        <td>当下拉框完全隐藏后发生（执行完隐藏动画之后）.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="bs-docs-section">
                        <h2 class="page-header" id="chosen">下拉列表Chosen<small>chosen.mower.js&nbsp;chosen.remote.mower.js</small></h2>
                        <p>Mower为了增强单选列表和多选列表，引入第三方插件<a target="_blank" href="https://github.com/harvesthq/chosen" title="" data-original-title="这是一个第三方组件，点击访问网站"><i class="icon-heart"></i> Chosen</a>。</p>
                        <h3 class="item-header" id="chosen-examples">多项选择和单项选择</h3>
                        <div class="bs-example">
                            <div class="row" id="toggleContainer">
                                <div class="col-md-6">
                                    <select rel="chosen" data-disable_search_threshold="5" data-width="100%" data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2">
                                        <option value=""></option>
                                        <option value="cat">小猫</option>
                                        <option value="dog">小狗</option>
                                        <option value="fish">金鱼</option>
                                        <option value="dragon">龙</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <select rel="chosen"  data-width="100%" data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple>
                                        <option value="strawberries">草莓</option>
                                        <option value="apple">苹果</option>
                                        <option value="orange">橙子</option>
                                        <option value="cherry">樱桃</option>
                                        <option value="banana">香蕉</option>
                                        <option value="figs">无花果</option>
                                    </select>
                                </div>
                            </div>
                            </br>
                            <div class="row">
                                <div class="col-md-6">
                                    <select rel="remoteChosen" data-placeholder="选择您喜欢球队..." class="chosen-select form-control" tabindex="5">
                                        <option value=""></option>
                                        <optgroup label="NFC EAST">
                                            <option>Dallas Cowboys</option>
                                            <option>New York Giants</option>
                                            <option>Philadelphia Eagles</option>
                                            <option>Washington Redskins</option>
                                        </optgroup>
                                        <optgroup label="NFC NORTH">
                                            <option>Chicago Bears</option>
                                            <option>Detroit Lions</option>
                                            <option>Green Bay Packers</option>
                                            <option>Minnesota Vikings</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;select  rel="chosen" data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2"&gt;
  &lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="cat"&gt;小猫&lt;/option&gt;
  &lt;option value="dog"&gt;小狗&lt;/option&gt;
  &lt;option value="fish"&gt;金鱼&lt;/option&gt;
  &lt;option value="dragon"&gt;龙&lt;/option&gt;
&lt;/select&gt;

&lt;select rel="chosen"  data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple&gt;
  &lt;option value="strawberries"&gt;草莓&lt;/option&gt;
  &lt;option value="apple"&gt;苹果&lt;/option&gt;
  &lt;option value="orange"&gt;橙子&lt;/option&gt;
  &lt;option value="cherry"&gt;樱桃&lt;/option&gt;
  &lt;option value="banana"&gt;香蕉&lt;/option&gt;
  &lt;option value="figs"&gt;无花果&lt;/option&gt;
&lt;/select&gt;
                   </pre>
                        </div>
                        <h3 class="item-header" id="chosen-examples-ajax">Ajax加载下拉菜单数据</h3>
                        <div class="bs-example">
                            <select rel="remoteChosen" data-server="true" data-url="assets/ajax/data/chosen.json" data-placeholder="选择喜欢城市..." class="chosen-select form-control" >
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;select rel="remoteChosen" data-url="assets/ajax/data/chosen.json" data-placeholder="选择喜欢城市..." class="chosen-select form-control" &gt;
 &lt;option value=""&gt;&lt;/option&gt;
&lt;/select&gt;
                    </pre>
                        </div>
                        <h3 class="item-header" id="chosen-usage">如何使用</h3>
                        <h4 class="subitem-header" id="chosen-usage-rel">rel属性标识初始化插件</h4>
                        <p>在下拉列表上面增加属性<code>rel="chosen"</code>默认初始化插件</p>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;select  rel="chosen" data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2"&gt;
  &lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="cat"&gt;小猫&lt;/option&gt;
  &lt;option value="dog"&gt;小狗&lt;/option&gt;
  &lt;option value="fish"&gt;金鱼&lt;/option&gt;
  &lt;option value="dragon"&gt;龙&lt;/option&gt;
&lt;/select&gt;
                   </pre>
                        </div>
                        <h4 class="subitem-header" id="chosen-usage-js">javascript初始化插件</h4>
                        <div class="highlight">
                            <pre class="prettyprint">
$(select).chosen(options);
                    </pre>
                        </div>
                        <h4 class="subitem-header">参数</h4>
                        <p>既可以直接在下拉列表元素上面增加<code>data-*</code>属性设置参数，也可以通过js调用传递初始化参数option对象。</p>
                        <p>以下仅列出常用参数，更多参数请查看插件官网<a target="_blank" href="https://github.com/harvesthq/chosen" title="" data-original-title="这是一个第三方组件，点击访问网站"><i class="icon-heart"></i> Chosen</a></p>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>参数</th>
                                    <th>名称</th>
                                    <th>可选值</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>disable_search_threshold</code></td>
                                    <td>搜索框失效阀值</td>
                                    <td>
                                        阀值，例如<code>10</code>
                                    </td>
                                    <td>下拉列表内容条目少于阀值时候隐藏搜索框</td>
                                </tr>
                                <tr>
                                    <td><code>no_results_text</code></td>
                                    <td>没有对应结果提示信息内容</td>
                                    <td>
                                        提示信息内容
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><code>max_selected_options</code></td>
                                    <td>多选最大数目</td>
                                    <td>
                                        最大数目值
                                    </td>
                                    <td>配合<code>multiple</code>多选参数使用</td>
                                </tr>
                                <tr>
                                    <td><code>allow_single_deselect</code></td>
                                    <td>单选中非必须选中</td>
                                    <td>
                                        <code>true</code>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><code>url</code></td>
                                    <td>Ajax加载数据地址</td>
                                    <td>
                                        <code></code>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><code>datasource</code></td>
                                    <td>静态数据</td>
                                    <td>
                                    </td>
                                    <td>JS函数或者数组。设置URL选项，datasource选项失效。</td>
                                </tr>
                                <tr>
                                    <td><code>nameField</code></td>
                                    <td>显示值</td>
                                    <td>
                                    </td>
                                    <td>url或者datasource选项使用时有效</td>
                                </tr>
                                <tr>
                                    <td><code>valueField</code></td>
                                    <td>实际值</td>
                                    <td>
                                    </td>
                                    <td>url或者datasource选项使用时有效</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="bs-docs-section">
                        <h2 id="dropdowntable" class="page-header">下拉表格<small>dropdown.table.mower.js</small></h2>
                        <div class="alert alert-danger">
                            <h4>插件依赖</h4>
                            <p>
                                弹出框依赖
                                <a href="http://datatables.net/" target="_blank">表格插件Datatables</a> 。Mower默认打包已经包含，独立使用此插件需要先加载表格插件。
                            </p>
                        </div>
                        <h3 class="item-header" id="dropdowntable-examples">实例</h3>
                        <div class="bs-example">
                            <div class="input-group mu-dropdowntable" data-columns="{'name':'名称','position':'职位','office':'办公地点','salary':'薪资'}" data-code-field="extn" data-label-field="name" data-real-field="extn" data-width="300px" data-height="300px" data-url="assets/ajax/data/objects.txt" rel="dropdowntable">
                                <input type="text" class="form-control">
                                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-table"></i></button>
                  </span>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="input-group mu-dropdowntable" 
data-columns="{'name':'名称','position':'职位','office':'办公地点','salary':'薪资'}" 
data-code-field="extn" 
data-label-field="name" 
data-real-field="extn"
data-width="300px"
data-height="400px"
data-url="assets/ajax/data/objects.txt" 
rel="dropdowntable"&gt;
  &lt;input type="text" class="form-control"&gt;
  &lt;span class="input-group-btn"&gt;
    &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-table"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/span&gt;
&lt;/div&gt;
            </pre>
                        </div>
                        <h3 class="item-header" id="dropdowntable-usage">如何使用</h3>
                        <h4 class="subitem-header" id="dropdowntable-usage-rel">通过 <code>rel="dropdowntable"</code>激活下拉表格</h4>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="input-group mu-dropdowntable" 
data-columns="{'name':'名称','position':'职位','office':'办公地点','salary':'薪资'}" 
data-code-field="extn" 
data-label-field="name" 
data-real-field="extn"
data-width="300px"
data-height="400px"
data-url="assets/ajax/data/objects.txt" 
rel="dropdowntable"&gt;
  &lt;input type="text" class="form-control"&gt;
  &lt;span class="input-group-btn"&gt;
    &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-table"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/span&gt;
&lt;/div&gt;
              </pre>
                        </div>
                        <h4 class="subitem-header" id="dropdowntable-usage-js">通过JavaScript激活下拉表格</h4>
                        <div class="highlight">
                            <pre class="prettyprint">
  $(<span class="string">'#selector'</span>).dropdowntable(options)
              </pre>
                        </div>
                        <h4 class="subitem-header" id="#dropdowntable-option">参数</h4>
                        <p>
                            可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                            <code>data-</code> 之后，例如
                            <code>data-url=""</code> 。
                        </p>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 100px;">名称</th>
                                        <th style="width: 100px;">类型</th>
                                        <th style="width: 50px;">默认值</th>
                                        <th>描述</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>url</td>
                                        <td>string</td>
                                        <td>空</td>
                                        <td>数据Ajax加载地址</td>
                                    </tr>
                                    <tr>
                                        <td>codeField</td>
                                        <td>string</td>
                                        <td>空</td>
                                        <td>
                                            列值的名称。选中行记录得到相对应的数值，并生成name为<code>realField</code>隐藏域.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>labelField</td>
                                        <td>string</td>
                                        <td>空</td>
                                        <td>
                                            列值的名称。选中记录得到相对应的数值，并填充到input里面显示.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>realField</td>
                                        <td>string</td>
                                        <td>空</td>
                                        <td>
                                            表单提交input的名称。未提供此参数默认与<code>codeField</code>相同。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>multiple</td>
                                        <td>boolean</td>
                                        <td>false</td>
                                        <td>
                                            是否多选
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>separator</td>
                                        <td>string</td>
                                        <td><code>,</code></td>
                                        <td>
                                            配合<code>multiple</code>选项,显示分隔符.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>width</td>
                                        <td>number</td>
                                        <td><code>null</code></td>
                                        <td>
                                            <p>
                                                下拉表格容器宽度,应用于表格容器
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>height</td>
                                        <td>number</td>
                                        <td><code>null</code></td>
                                        <td>
                                            <p>
                                                下拉表格高度，应用于表格
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>columns</td>
                                        <td>string|object</td>
                                        <td>空</td>
                                        <td>
                                            <p>
                                                表格数据列信息.
                                            </p>
                                            <p><code>{'name':'名称','position':'职位','office':'办公地点','salary':'薪资'}</code></p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>initValue</td>
                                        <td>string|array</td>
                                        <td>空</td>
                                        <td>
                                            <p>
                                                初始化值
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>orientation</td>
                                        <td>string</td>
                                        <td><code>auto</code></td>
                                        <td>
                                            <p>
                                                下拉表格框显示方向
                                            </p>
                                            <p>由<code>left</code> or <code>right</code>, <code>top</code> or <code>bottom</code>, and <code>auto</code> 组成，单个或者空格隔开方向,譬如,<code>top left</code>, <code>bottom</code>, <code>right</code>, <code>auto top</code>等等. </p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <h4 class="subitem-header" id="dropdowntable-function">方法</h4>
                        <h4>$().dropdowntable(options)</h4>
                        <p>为一组元素应用下拉表格。</p>
                        <h4>.dropdowntable('getValue')</h4>
                        <p>获取组件值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
$('#element').dropdowntable('getValue');
              </pre>
                        </div>
                        <h4>.dropdowntable('setValue')</h4>
                        <p>设置组件的值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
单个数值：$('#element').dropdowntable('setValue'，'002');
数组：$('#element').dropdowntable('setValue'，['001','007']);
            </pre>
                        </div>
                        <h4>.dropdowntable('clear')</h4>
                        <p>清除组件的值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
$('#element').dropdowntable('clear');
            </pre>
                        </div>
                    </div>
                    <div class="bs-docs-section">
                        <h2 id="dropdowntree" class="page-header">下拉树<small>dropdown.tree.mower.js</small></h2>
                        <div class="alert alert-danger">
                            <h4>插件依赖</h4>
                            <p>
                                下拉树依赖
                                <a href="http://www.jstree.com/" target="_blank">树插件Jstree</a> 。Mower默认打包已经包含，独立使用此插件需要先加载树插件
                            </p>
                        </div>
                        <h3 class="item-header" id="dropdowntree-examples">实例</h3>
                        <div class="bs-example">
                            <div class="input-group mu-dropdowntree" data-width="400px" data-height="300px" data-code-field="id" data-label-field="text" data-url="assets/ajax/data/tree.txt" rel="dropdowntree">
                                <input type="text" class="form-control">
                                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-table"></i></button>
                  </span>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="input-group mu-dropdowntree" 
data-width="400px" 
data-height="300px"
data-code-field="id" 
data-text-field="name" 
data-url="assets/ajax/data/tree.txt" 
rel="dropdowntree"&gt;
&lt;input type="text" class="form-control"&gt;
&lt;span class="input-group-btn"&gt;
  &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-table"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/span&gt;
&lt;/div&gt;
            </pre>
                        </div>
                        <h3 class="item-header" id="dropdowntree-usage">用法</h3>
                        <h4 class="subitem-header" id="dropdowntree-usage-rel">通过 <code>rel="dropdowntree"</code>激活下拉树</h4>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="input-group mu-dropdowntree" 
data-width="400px" 
data-height="300px"
data-code-field="id" 
data-text-field="name" 
data-url="assets/ajax/data/tree.txt" 
rel="dropdowntree"&gt;
&lt;input type="text" class="form-control"&gt;
&lt;span class="input-group-btn"&gt;
  &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-table"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/span&gt;
&lt;/div&gt;
            </pre>
                        </div>
                        <h4 class="subitem-header" id="dropdowntree-usage-js">通过JavaScript激活下拉树</h4>
                        <div class="highlight">
                            <pre class="prettyprint">
  $(<span class="string">'#selector'</span>).dropdowntree(options)
              </pre>
                        </div>
                        <h4 class="subitem-header" id="#dropdowntree-option">参数</h4>
                        <p>
                            可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                            <code>data-</code> 之后，例如
                            <code>data-url=""</code> 。
                        </p>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 100px;">名称</th>
                                        <th style="width: 100px;">类型</th>
                                        <th style="width: 50px;">默认值</th>
                                        <th>描述</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>url</td>
                                        <td>string</td>
                                        <td>空</td>
                                        <td>数据Ajax加载地址</td>
                                    </tr>
                                    <tr>
                                        <td>codeField</td>
                                        <td>string</td>
                                        <td>空</td>
                                        <td>
                                            节点值的名称。选中节点得到相对应的数值，并生成name为<code>codeField</code>隐藏域.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>labelField</td>
                                        <td>string</td>
                                        <td>空</td>
                                        <td>
                                            节点显示的名称。选中节点得到相对应的数值，并填充到input里面显示.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>multiple</td>
                                        <td>boolean</td>
                                        <td>false</td>
                                        <td>
                                            是否多选
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>separator</td>
                                        <td>string</td>
                                        <td><code>,</code></td>
                                        <td>
                                            配合<code>multiple</code>选项,显示分隔符.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>width</td>
                                        <td>number</td>
                                        <td><code>null</code></td>
                                        <td>
                                            <p>
                                                下拉树容器宽度,应用于树容器
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>height</td>
                                        <td>number</td>
                                        <td><code>null</code></td>
                                        <td>
                                            <p>
                                                下拉树高度，应用于树
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>initValue</td>
                                        <td>string|array</td>
                                        <td>空</td>
                                        <td>
                                            <p>
                                                初始化值
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>orientation</td>
                                        <td>string</td>
                                        <td><code>auto</code></td>
                                        <td>
                                            <p>
                                                下拉树框显示方向
                                            </p>
                                            <p>由<code>left</code> or <code>right</code>, <code>top</code> or <code>bottom</code>, and <code>auto</code> 组成，单个或者空格隔开方向,譬如,<code>top left</code>, <code>bottom</code>, <code>right</code>, <code>auto top</code>等等. </p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <h4 class="subitem-header" id="dropdowntree-function">方法</h4>
                        <h4>$().dropdowntree(options)</h4>
                        <p>为一组元素应用下拉树。</p>
                        <h4>.dropdowntree('getValue')</h4>
                        <p>获取组件值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
$('#element').dropdowntree('getValue');
              </pre>
                        </div>
                        <h4>.dropdowntree('setValue')</h4>
                        <p>设置组件的值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
单个数值：$('#element').dropdowntree('setValue'，'002');
数组：$('#element').dropdowntree('setValue'，['001','007']);
            </pre>
                        </div>
                        <h4>.dropdowntree('clear')</h4>
                        <p>清除组件的值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
$('#element').dropdowntree('clear');
            </pre>
                        </div>
                    </div>
                    <div class="bs-docs-section">
                        <h2 id="tagsselect" class="page-header">下拉标签式查询</h2>
                        <h3 class="item-header" id="tagsselect-examples">实例</h3>
                        <div class="bs-example">
                            <div>
                                <div class="dropdown mu-dropdownquery">
                                    <input id="tags-dropdownquery" class="form-control" type="text" />
                                </div>
                            </div>
                        </div>
                        <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="dropdown mu-dropdownquery"&gt;
    &lt;input id="tagsinput" class="form-control" type="text" /&gt;
&lt;/div&gt;
&lt;script&gt;
var cities = [{
    "value": 1,
    "text": "奥斯丁",
    "continent": "Europe"
}, {
    "value": 2,
    "text": "伦敦",
    "continent": "Europe"
}];

var elt = $('#tagsinput');
elt.tagsselect({
    itemValue: 'value',
    itemText: 'text',
    dropdownquery: {
        displayKey: 'text',
        source: cities
    }
});
&lt;/script&gt;
            </pre>
                        </div>
                        <h3 class="item-header" id="tagsselect-usage">用法</h3>
                        <h4 class="subitem-header" id="tagsselect-usage-js">通过JavaScript激活标签式查询</h4>
                        <div class="highlight">
                            <pre class="prettyprint">
$(<span class="string">'#selector'</span>).tagsselect(options)
              </pre>
                        </div>
                        <h4 class="subitem-header" id="tagsselect-option">参数</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 100px;">名称</th>
                                        <th style="width: 100px;">类型</th>
                                        <th style="width: 50px;">默认值</th>
                                        <th>描述</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>tagClass</td>
                                        <td>string&nbsp;|&nbsp;function</td>
                                        <td>空</td>
                                        <td>标签样式值,若使用函数，返回样式名称即可</td>
                                    </tr>
                                    <tr>
                                        <td>itemValue</td>
                                        <td>string&nbsp;|&nbsp;function</td>
                                        <td>空</td>
                                        <td>
                                            标签实际值的名称。选中下拉记录根据<code>itemValue</code>设置属性值得到相对应的实际值或者函数直接返回实际值 用来生成相对于隐藏域保存.
                                            <pre class="prettyprint">
$('input').tagsselect({
    itemValue: 'id'
});
                      </pre>
                                            <pre class="prettyprint">
$('input').tagsselect({
  itemValue: function(item) {
    return item.id;
  }
});
                      </pre>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>itemText</td>
                                        <td>string&nbsp;|&nbsp;function</td>
                                        <td>空</td>
                                        <td>
                                            标签显示值的名称。选中下拉记录根据<code>itemText</code>设置属性值得到相对应的显示值或者函数直接返回显示值 用来生成标签.
                                            <pre class="prettyprint">
$('input').tagsselect({
    itemText: 'id'
});
                      </pre>
                                            <pre class="prettyprint">
$('input').tagsselect({
  itemText: function(item) {
    return item.id;
  }
});
                      </pre>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>dropdownquery</td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            下拉查询参数
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>displayKey</td>
                                        <td>string</td>
                                        <td>'label'</td>
                                        <td>
                                            显示在下拉列表中的值.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>source</td>
                                        <td>string&nbsp;|&nbsp;function</td>
                                        <td>空</td>
                                        <td>
                                            下拉列表数据源
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <h4 class="subitem-header" id="tagsselect-function">方法</h4>
                        <h4>$().tagsselect(options)</h4>
                        <p>为一组元素应用下拉表格。</p>
                        <h4>.tagsselect('items')</h4>
                        <p>获取组件值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
$('#element').tagsselect('items');
              </pre>
                        </div>
                        <h4>.tagsselect('removeAll')</h4>
                        <p>清除组件的值。</p>
                        <div class="highlight">
                            <pre class="prettyprint">
$('#element').tagsselect('removeAll');
            </pre>
                            </diSv>
                        </div>
                        <div class="bs-docs-section">
                            <h2 id="lookup" class="page-header">lookup查找查询<small>lookup.mower.js</small></h2>
                            <div class="alert alert-danger">
                                <h5>插件依赖</h5>
                                <p>
                                    模态框弹出查询依赖
                                    <a href="#modalbox">ModalBox插件</a> 。Mower默认打包已经包含，独立使用此插件需要先加载ModalBox插件。
                                </p>
                            </div>
                            <h3 class="item-header" id="lookup-examples">实例</h3>
                            <h4 class="subitem-header" id="lookup-examples-static">静态</h4>
                            <div class="bs-example">
                                <div>
                                    <div class="input-group dropdown mu-lookup" data-name="street" rel="lookup">
                                        <div class="dropdown-menu" style="width:400px;height:300px;text-align:center;">
                                            <p>静态内容</p>
                                        </div>
                                        <input id="tagsinput1" type="text" class="form-control">
                                        <span class="input-group-btn" data-toggle="dropdownlookup">
                    <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                  </span>
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class="input-group dropdown mu-lookup" data-name="street"
 rel="lookup"&gt;
    &lt;div class="dropdown-menu" style="width:400px;height:300px;text-align:center;"&gt;
      &lt;p&gt;静态内容&lt;/p&gt;
    &lt;/div&gt;
    &lt;input id="tagsinput1" type="text" class="form-control" &gt;
    &lt;span class="input-group-btn" data-toggle="dropdownlookup"&gt;
      &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/span&gt;
&lt;/div&gt;
          </pre>
                            </div>
                            <h4 class="subitem-header" id="lookup-examples-ajax">Ajax加载内容</h4>
                            <div class="bs-example">
                                <div>
                                    <div class="input-group dropdown mu-lookup" data-name="street" data-type="ajax" data-title="TEST" data-width="400px" data-height="200px" data-url="partial/remote-modal.html" rel="lookup">
                                        <input id="tagsinput1" type="text" class="form-control">
                                        <span class="input-group-btn" data-toggle="dropdownlookup">
                  <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                </span>
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class="input-group dropdown mu-lookup" data-name="street" data-type="ajax" data-title="TEST" data-width="400px" data-height="200px" data-url="partial/remote-modal.html" rel="lookup"&gt;
   &lt;input id="tagsinput1" type="text" class="form-control"&gt;
   &lt;span class="input-group-btn" data-toggle="dropdownlookup"&gt;
     &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
   &lt;/span&gt;
&lt;/div&gt;
          </pre>
                            </div>
                            <h4 class="subitem-header" id="lookup-examples-iframe">Iframe加载内容</h4>
                            <div class="bs-example">
                                <div>
                                    <div class="input-group dropdown mu-lookup" data-name="street" data-type="iframe" data-title="TEST" data-width="400px" data-height="200px" data-url="partial/iframe-modal.html" rel="lookup">
                                        <input id="tagsinput1" type="text" class="form-control">
                                        <span class="input-group-btn" data-toggle="dropdownlookup">
                  <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                </span>
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class="input-group dropdown mu-lookup" data-name="street" data-type="iframe" data-title="TEST" data-width="400px" data-height="200px" data-url="../../../partial/iframe-modal.html" rel="lookup"&gt;
   &lt;input id="tagsinput1" type="text" class="form-control"&gt;
   &lt;span class="input-group-btn" data-toggle="dropdownlookup"&gt;
     &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
   &lt;/span&gt;
&lt;/div&gt;
          </pre>
                            </div>
                            <h4 class="subitem-header" id="lookup-examples-modal">Modal加载内容</h4>
                            <div class="bs-example">
                                <div class="input-group dropdown mu-lookup" data-name="street" data-type="modal-ajax" data-title="TEST" data-width="400px" data-height="200px" data-url="partial/remote-modal.html" rel="lookup">
                                    <input id="tagsinput1" type="text" class="form-control">
                                    <span class="input-group-btn" data-toggle="popmodal">
                  <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                </span>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class="input-group dropdown mu-lookup" data-name="street" data-type="modal-ajax" data-title="TEST" data-width="400px" data-height="200px" data-url="../../../partial/iframe-modal.html" rel="lookup"&gt;
   &lt;input id="tagsinput1" type="text" class="form-control"&gt;
   &lt;span class="input-group-btn" data-toggle="popmodal"&gt;
     &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
   &lt;/span&gt;
&lt;/div&gt;
          </pre>
                            </div>
                            <h3 class="item-header" id="lookup-usage">如何使用</h3>
                            <h4 class="subitem-header" id="lookup-usage-rel">通过 <code>rel="lookup"</code>激活查找查询</h4>
                            <div class="highlight">
                                <pre class="prettyprint">
            <br/>
&lt;div class="input-group dropdown mu-lookup" data-name="street" data-type="modal-ajax" data-title="TEST" data-width="400px" data-height="200px" data-url="../../../partial/iframe-modal.html" rel="lookup"&gt;
   &lt;input id="tagsinput1" type="text" class="form-control"&gt;
   &lt;span class="input-group-btn" data-toggle="popmodal"&gt;
     &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-table"&gt;&lt;/i&gt;&lt;/button&gt;
   &lt;/span&gt;
&lt;/div&gt;
            </pre>
                            </div>
                            <h4 class="subitem-header" id="lookup-usage-js">通过JavaScript激活查找查询</h4>
                            <div class="highlight">
                                <pre class="prettyprint">
$(<span class="string">'#selector'</span>).lookup(options)
            </pre>
                            </div>
                            <h4 class="subitem-header" id="lookup-option">参数</h4>
                            <p>
                                可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                                <code>data-</code> 之后，例如
                                <code>data-url=""</code> 。
                            </p>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>参数</th>
                                        <th>名称</th>
                                        <th>可选值</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><code>type</code></td>
                                        <td>模态框类型</td>
                                        <td>
                                            <ul>
                                                <li><code>'static'</code>静态类型,预先把内容填充在<code>drodown-menu</code>中.</li>
                                                <li><code>'custom'</code>（默认），自定义类型</li>
                                                <li><code>'iframe'</code></li>
                                                <li><code>'ajax'</code></li>
                                                <li><code>'modal-custom'</code></li>
                                                <li><code>'modal-iframe'</code></li>
                                                <li><code>'modal-ajax'</code></li>
                                            </ul>
                                        </td>
                                        <td>通常该参数和参数<code>url</code>一起使用，当指定了<code>custom</code>、<code>remote</code>和<code>iframe</code>参数时该参数可以忽略.若使用模态框弹出内容，类型前缀加上<code>modal-</code></td>
                                    </tr>
                                    <tr>
                                        <td><code>url</code></td>
                                        <td>远程内容地址</td>
                                        <td>
                                            远程地址字符串
                                        </td>
                                        <td>通常该参数和<code>type</code>一起似乎用，当指定了<code>custom</code>、<code>remote</code>和<code>iframe</code>参数时该参数可以忽略</td>
                                    </tr>
                                    <tr>
                                        <td><code>remote</code></td>
                                        <td>Ajax内容地址</td>
                                        <td>
                                            远程地址字符串
                                        </td>
                                        <td>如果使用该参数，则参数<code>type</code>和<code>url</code>可以忽略</td>
                                    </tr>
                                    <tr>
                                        <td><code>iframe</code></td>
                                        <td>iframe页面地址</td>
                                        <td>
                                            远程地址字符串
                                        </td>
                                        <td>如果使用该参数，则参数<code>type</code>和<code>url</code>可以忽略</td>
                                    </tr>
                                    <tr>
                                        <td><code>width</code></td>
                                        <td>宽度</td>
                                        <td>
                                            <ul>
                                                <li><code>null</code>（默认），默认宽度</li>
                                                <li>其他表示宽度的CSS值字符串</li>
                                            </ul>
                                        </td>
                                        <td>如果指定了宽度不是<code>'auto'</code>则可能出现内容与高度不匹配的情况。</td>
                                    </tr>
                                    <tr>
                                        <td><code>height</code></td>
                                        <td>高度</td>
                                        <td>
                                            <ul>
                                                <li><code>'auto'</code>（默认），自动根据内容调整</li>
                                                <li>其他表示高度的CSS值字符串</li>
                                            </ul>
                                        </td>
                                        <td>如果指定了高度不是<code>'auto'</code>则可能出现内容与高度不匹配的情况。</td>
                                    </tr>
                                    <tr>
                                        <td>codeField</td>
                                        <td>string</td>
                                        <td><code>'code'</code></td>
                                        <td>
                                            实际值的名称。调用方法<code>setValue</code>，根据<code>codeField</code>获取对应数值，并生成对应的name隐藏域.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>labelField</td>
                                        <td>string</td>
                                        <td><code>'label'</code></td>
                                        <td>
                                            显示值的名称。调用方法<code>setValue</code>，根据<code>labelField</code>获取对应数值，并填充到input里面显示.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>multiple</td>
                                        <td>boolean</td>
                                        <td>false</td>
                                        <td>
                                            是否多选
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>separator</td>
                                        <td>string</td>
                                        <td><code>,</code></td>
                                        <td>
                                            配合<code>multiple</code>选项,显示分隔符.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <h4 class="subitem-header" id="lookup-function">方法</h4>
                            <h4>$().lookup(options)</h4>
                            <p>为一组元素应用下拉表格。</p>
                            <h4>.lookup('getValue')</h4>
                            <p>获取组件值。</p>
                            <div class="highlight">
                                <pre class="prettyprint">
$('#element').lookup('getValue');
            </pre>
                            </div>
                            <h4>.lookup('setValue')</h4>
                            <p>设置组件的值。</p>
                            <div class="highlight">
                                <pre class="prettyprint">
单个数值：$('#element').lookup('setValue'，'002');
数组：$('#element').lookup('setValue'，['001','007']);
          </pre>
                            </div>
                            <h4>.lookup('clear')</h4>
                            <p>清除组件的值。</p>
                            <div class="highlight">
                                <pre class="prettyprint">
$('#element').lookup('clear');
          </pre>
                            </div>
                        </div>
                        <div class="bs-docs-section">
                            <h2 class="page-header" id="datetimepicker">日期时间选择 </h2>
                            <p>日期选择插件可以帮助用户更方便准确的选择日期和时间。</p>
                            <p>在Mower中包含的日期选择控件基于开源项目 <a href="https://github.com/smalot/bootstrap-datetimepicker/" target="_blank">Bootstrap 3 Datepicker</a> 定制开发。</p>
                            <h3 class="item-header">类型</h3>
                            <h4 class="subitem-header" id="datetimepicker-date">日期选择</h4>
                            <div class="bs-example">
                                <div class="form-group">
                                    <div class='input-group date datetimepicker-date'>
                                        <input type='text' class="form-control" />
                                        <span class="input-group-addon">
                          <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class="form-group"&gt;
    &lt;div class='input-group date datetimepicker-date'  &gt;
      &lt;input type='text' class="form-control" /&gt;
      &lt;span class="input-group-addon"&gt;
          &lt;span class="fa fa-calendar"&gt;
          &lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// 仅选择日期
$(".datetimepicker-date").datetimepicker(
{
    language:  "zh-CN",
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0,
    format: "yyyy-mm-dd"
});
&lt;/script&gt;
              </pre>
                            </div>
                            <h4 class="subitem-header" id="datetimepicker-time">时间选择</h4>
                            <div class="bs-example">
                                <div class="form-group">
                                    <div class='input-group date datetimepicker-time'>
                                        <input type='text' class="form-control" />
                                        <span class="input-group-addon">
                          <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class="form-group"&gt;
  &lt;div class='input-group date datetimepicker-time' &gt;
      &lt;input type='text' class="form-control" /&gt;
      &lt;span class="input-group-addon"&gt;
          &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// 选择时间
$(".datetimepicker-time").datetimepicker({
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 1,
    minView: 0,
    maxView: 1,
    forceParse: 0,
    format: 'hh:ii:ss'
});
&lt;/script&gt;
              </pre>
                            </div>
                            <h4 class="subitem-header" id="datetimepicker-all">日期+时间选择</h4>
                            <div class="bs-example">
                                <div class="form-group">
                                    <div class='input-group date datetimepicker-all'>
                                        <input type='text' class="form-control" />
                                        <span class="input-group-addon">
                          <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class="form-group"&gt;
    &lt;div class='input-group date datetimepicker-all'&gt;
        &lt;input type='text' class="form-control" /&gt;
        &lt;span class="input-group-addon"&gt;
            &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// 选择时间和日期
$(".datetimepicker-all").datetimepicker(
{
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    format: "yyyy-mm-dd hh:ii"
});
&lt;/script&gt;
              </pre>

                            </div>
                            <h3 class="item-header">变化</h3>
                            <p>日期选择插件中可以设置某些参数达到需要显示效果。下面罗列常用参数,更多选项参数请参考<a href="http://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent" target="_blank">Bootstrap 3 Datepicker Options。</a> </p>
                            <h4 class="subitem-header" id="datetimepicker-icon">不带图标</h4>
                            <div class="bs-example">
                                <div class="row">
                                    <div class="col-md-4">
                                        <input type="text" class="form-control datetimepicker-date" placeholder="选择或者输入一个日期：yyyy-mm-dd" >
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control datetimepicker-time" placeholder="选择或者输入一个时间：hh:ii:ss" >
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control datetimepicker-all" placeholder="选择或者输入一个日期+时间：yyyy-mm-dd hh:ii:ss">
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
  &lt;input type="text" class="form-control" placeholder="选择或者输入一个日期：YYYY-MM-DD"  &gt;
  &lt;script type="text/javascript"&gt;
// 选择时间和日期
$(".datetimepicker-all").datetimepicker(
{
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    format: "yyyy-mm-dd hh:ii"
});
&lt;/script&gt;
              </pre>
                            </div>
                            <h4 class="subitem-header" id="datetimepicker-clear">清空数值</h4>
                            <p>日期选择框中增加清空按钮，可以快速删除输入框原有的日期。</p>
                            <div class="bs-example">
                                <div class="form-group">
                                    <div class='input-group date' rel="datetimepicker" data-show-clear="true" data-format="YYYY-MM-DD HH:mm:ss">
                                        <input type='text' class="form-control" />
                                        <span class="input-group-addon">
            <span class="glyphicon glyphicon-remove"></span>
                                        </span>
                                        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="highlight">
                                <pre class="prettyprint">
&lt;div class='input-group date'  rel="datetimepicker" data-show-clear="true" data-format="YYYY-MM-DD HH:mm:ss"&gt;
    &lt;input type='text' class="form-control" /&gt;
    &lt;span class="input-group-addon"&gt;
        &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="input-group-addon"&gt;
        &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
    &lt;/span&gt;
&lt;/div&gt;
              </pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
                        <ul class="nav bs-docs-sidenav">
                            <li>
                                <a href="#modals">模态框</a>
                                <ul class="nav">
                                    <li><a href="#modals-examples">实例</a></li>
                                    <li><a href="#modals-examples-static">静态实例</a></li>
                                    <li><a href="#modals-examples-dynamic">动态实例</a></li>
                                    <li><a href="#modal-sizing">更改模态框的大小</a></li>
                                    <li><a href="#modal-fade">禁用动画效果</a></li>
                                    <li><a href="#modal-responsive">更改模态框的大小</a></li>
                                    <li><a href="#modal-fade">禁用动画效果</a></li>
                                    <li><a href="#modal-usage">如何使用</a></li>
                                    <li><a href="#modal-usage-data">data属性调用</a></li>
                                    <li><a href="#modal-usage-js">javascript调用</a></li>
                                    <li><a href="#modal-usage-options">参数</a></li>
                                    <li><a href="#modal-usage-method">方法</a></li>
                                    <li><a href="#modal-usage-event">事件</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#modalbox">ModalBox</a>
                                <ul class="nav">
                                    <li><a href="#modalbox-examples">实例</a></li>
                                    <li><a href="#modalbox-alert">提示</a></li>
                                    <li><a href="#modalbox-comfirm">确认</a></li>
                                    <li><a href="#modalbox-custom-dialog">自定义模态框</a></li>
                                    <li><a href="#modalbox-custom-html">自定义HTML内容</a></li>
                                    <li><a href="#modalbox-custom-ajax">Ajax加载内容</a></li>
                                    <li><a href="#modalbox-usage">javascript调用</a></li>
                                    <li><a href="#modalbox-usage">如何使用</a></li>
                                    <li><a href="#modalbox-usage-data">使用data属性</a></li>
                                    <li><a href="#modalbox-usage-js">手动调用Javascript</a></li>
                                    <li><a href="#modalbox-usage-options">参数</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#messagebox">消息框</a>
                                <ul class="nav">
                                    <li><a href="#messagebox-examples">实例</a></li>
                                    <li><a href="#messagebox-warning">警告</a></li>
                                    <li><a href="#messagebox-success">成功</a></li>
                                    <li><a href="#messagebox-error">错误</a></li>
                                    <li><a href="#messagebox-info">提示</a></li>
                                    <li><a href="#messagebox-usage">如何使用</a></li>
                                    <li><a href="#messagebox-usage-js">javascript调用</a></li>
                                    <li><a href="#messagebox-usage-options">参数</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#tooltip">提示消息</a>
                                <ul class="nav">
                                    <li><a href="#tooltip-examples">实例</a></li>
                                    <li><a href="#tooltip-examples-direction">不同方向的提示</a></li>
                                    <li><a href="#tooltips-usage">用法</a></li>
                                    <li><a href="#tooltips-usage-rel">使用rel属性</a></li>
                                    <li><a href="#tooltips-usage-js">使用javaScript激活</a></li>
                                    <li><a href="#tooltips-option">参数</a></li>
                                    <li><a href="#tooltip-function">方法</a></li>
                                    <li><a href="#tooltip-event">事件</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#popover">弹出框</a>
                                <ul class="nav">
                                    <li><a href="#popover-examples">实例</a></li>
                                    <li><a href="#popover-examples-static">静态类型</a></li>
                                    <li><a href="#popover-examples-dynamic">动态演示</a></li>
                                    <li><a href="#popover-examples-direction">不同方向</a></li>
                                    <li><a href="#popover-examples-disable">弹出框消失</a></li>
                                    <li><a href="#popovers-usage">如何使用</a></li>
                                    <li><a href="#popovers-usage-rel">使用rel调用</a></li>
                                    <li><a href="#popovers-usage-js">使用JavaScript调用</a></li>
                                    <li><a href="#popovers-option">参数</a></li>
                                    <li><a href="#popover-function">方法</a></li>
                                    <li><a href="#popover-event">事件</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#dropdown">下拉菜单</a>
                                <ul class="nav">
                                    <li><a href="#dropdown-type">基本类型</a></li>
                                    <li><a href="#dropdown-type-navbar">导航条下拉菜单</a></li>
                                    <li><a href="#dropdown-type-tabs">标签下拉菜单</a></li>
                                    <li><a href="#dropdown-type-buttons">按钮下拉菜单</a></li>
                                    <li><a href="#dropdown-poptype">弹出方式</a></li>
                                    <li><a href="#dropdown-title-disable">小标题和禁用</a></li>
                                    <li><a href="#dropdown-usage">如何使用</a></li>
                                    <li><a href="#dropdown-usage-data">data属性调用</a></li>
                                    <li><a href="#dropdown-usage-js">javascript属性调用</a></li>
                                    <li><a href="#dropdown-usage-method">方法</a></li>
                                    <li><a href="#dropdown-usage-event">事件</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#chosen">下拉列表</a>
                                <ul class="nav">
                                    <li><a href="#chosen-examples">多项选择和单项选择</a></li>
                                    <li><a href="#chosen-examples-ajax">Ajax加载下拉菜单数据</a></li>
                                    <li><a href="#chosen-usage">如何使用</a></li>
                                    <li><a href="#chosen-usage-rel">rel属性标识初始化插件</a></li>
                                    <li><a href="#chosen-usage-js">javascript初始化插件</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#dropdowntable">下拉表格</a>
                                <ul class="nav">
                                    <li><a href="#dropdowntable-examples">实例</a></li>
                                    <li><a href="#dropdowntable-usage">如何使用</a></li>
                                    <li><a href="#dropdowntable-usage-rel">rel属性调用</a></li>
                                    <li><a href="#dropdowntable-usage-js">javascript调用</a></li>
                                    <li><a href="#dropdowntable-option">参数</a></li>
                                    <li><a href="#dropdowntable-function">方法</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#dropdowntree">下拉树</a>
                                <ul class="nav">
                                    <li><a href="#dropdowntree-examples">实例</a></li>
                                    <li><a href="#dropdowntree-usage">如何使用</a></li>
                                    <li><a href="#dropdowntree-usage-rel">rel属性调用</a></li>
                                    <li><a href="#dropdowntree-usage-js">javascript调用</a></li>
                                    <li><a href="#dropdowntree-option">参数</a></li>
                                    <li><a href="#dropdowntree-function">方法</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#tagsselect">下拉标签式查询</a>
                                <ul class="nav">
                                    <li><a href="#tagsselect-examples">实例</a></li>
                                    <li><a href="#tagsselect-usage">如何使用</a></li>
                                    <li><a href="#tagsselect-usage-js">javascript调用</a></li>
                                    <li><a href="#tagsselect-option">参数</a></li>
                                    <li><a href="#tagsselect-function">方法</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#lookup">lookup查找查询</a>
                                <ul class="nav">
                                    <li><a href="#lookup-examples">实例</a></li>
                                    <li><a href="#lookup-examples-static">实例</a></li>
                                    <li><a href="#lookup-examples-ajax">Ajax加载内容</a></li>
                                    <li><a href="#lookup-examples-iframe">Iframe加载内容</a></li>
                                    <li><a href="#lookup-examples-modal">Modal加载内容</a></li>
                                    <li><a href="#lookup-usage">如何使用</a></li>
                                    <li><a href="#lookup-usage-rel">rel属性调用</a></li>
                                    <li><a href="#lookup-usage-js">javascript调用</a></li>
                                    <li><a href="#lookup-option">参数</a></li>
                                    <li><a href="#lookup-function">方法</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#datetimepicker">日期选择</a>
                                <ul class="nav">
                                    <li><a href="#datetimepicker-date">日期</a></li>
                                    <li><a href="#datetimepicker-date">时间</a></li>
                                    <li><a href="#datetimepicker-all">日期时间</a></li>
                                    <li><a href="#datetimepicker-icon">不带图标</a></li>
                                    <li><a href="#datetimepicker-clear">清空数值</a></li>
                                </ul>
                            </li>
                        </ul>
                        <a class="back-to-top" href="#top">
                返回顶部
              </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bootstrap core JavaScript
================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="libs/jquery/jquery-1.11.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="mower/admin/js/mower.js"></script>
        <script src="assets/plugins/google-code-prettify/prettify.js"></script>
        <script src="assets/js/docs.min.js"></script>
        <script>
        $('#modalTriggerByFunc').click(function(event) {
            /* Act on the event */
            ModalBox.ajaxDialog({
                custom: function() {
                    return "当模态框显示时，时间是：" + (new Date).toString();
                }
            });
        });

        $(function() {
            $('#btn-modalbox-tip').click(function(event) {
                ModalBox.alert("Hello world!", function() {
                    //TODO
                });
            });
            $('#btn-modalbox-comfirm').click(function(event) {
                ModalBox.confirm("Are you sure?", function(result) {
                    //TODO
                });
            });
            $('#btn-modalbox-custom-dialog').click(function(event) {
                ModalBox.dialog({
                    message: "I am a custom dialog",
                    title: "Custom title",
                    buttons: {
                        success: {
                            label: "Success!",
                            className: "btn-success",
                            callback: function() {
                                Example.show("great success");
                            }
                        },
                        danger: {
                            label: "Danger!",
                            className: "btn-danger",
                            callback: function() {
                                Example.show("uh oh, look out!");
                            }
                        },
                        main: {
                            label: "Click ME!",
                            className: "btn-primary",
                            callback: function() {
                                Example.show("Primary button");
                            }
                        }
                    }
                });
            });
            $('#btn-modalbox-custom-html').click(function(event) {
                ModalBox.dialog({
                    title: "This is a form in a modal.",
                    message: '<div class="row">  ' +
                        '<div class="col-md-12"> ' +
                        '<form class="form-horizontal"> ' +
                        '<div class="form-group"> ' +
                        '<label class="col-md-4 control-label" for="name">Name</label> ' +
                        '<div class="col-md-4"> ' +
                        '<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
                        '<span class="help-block">Here goes your name</span> </div> ' +
                        '</div> ' +
                        '<div class="form-group"> ' +
                        '<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
                        '<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
                        '<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
                        'Really awesome </label> ' +
                        '</div><div class="radio"> <label for="awesomeness-1"> ' +
                        '<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
                        '</div> ' +
                        '</div> </div>' +
                        '</form> </div>  </div>',
                    buttons: {
                        success: {
                            label: "Save",
                            className: "btn-success",
                            callback: function() {
                                var name = $('#name').val();
                                var answer = $("input[name='awesomeness']:checked").val()
                                Example.show("Hello " + name + ". You've chosen <b>" + answer + "</b>");
                            }
                        }
                    }
                });
            });

            $('#btn-messagebox-warning').click(function(event) {
                MessageBox.warning("Hello world!");
            });


            $('#btn-messagebox-success').click(function(event) {
                MessageBox.success('Have fun storming the castle!', 'title-success');
            });

            $('#btn-messagebox-error').click(function(event) {
                MessageBox.error('I do not think that word means what you think it means.', 'title-error!');
            });

            $('#btn-messagebox-info').click(function(event) {
                MessageBox.info('这里是提示信息内容.', '提示');
            });

            var cities = [{
                "value": 1,
                "text": "奥斯丁",
                "continent": "Europe"
            }, {
                "value": 2,
                "text": "伦敦",
                "continent": "Europe"
            }];

            var elt = $('#tags-dropdownquery');
            elt.tagsselect({
                itemValue: 'value',
                itemText: 'text',
                dropdownquery: {
                    displayKey: 'text',
                    source: cities
                }
            });

            $(".datetimepicker-date").datetimepicker(
            {
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd",
                pickerPosition: "bottom-left"
            });
            // 选择时间
            $(".datetimepicker-time").datetimepicker({
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 1,
                minView: 0,
                maxView: 1,
                forceParse: 0,
                format: 'hh:ii:ss'
            });
            // 选择时间和日期
            $(".datetimepicker-all").datetimepicker(
            {
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                format: "yyyy-mm-dd hh:ii"
            });
        });
        </script>
</body>

</html>
